<template>
  <div id="login">
    <el-form
        :model="userInfo"
        status-icon
        :rules="rules"
        label-width="60px"
        class="login-form"
    >
      <!--   标题   -->
      <h3 class="title">登录</h3>
      <!--  用户名  -->
      <el-form-item label="用户名" prop="name" class="form-input">
        <el-input
            v-model="userInfo.name"
            type="text"
            autocomplete="off"
            placeholder="用户名"
            size="medium"
        ></el-input>
      </el-form-item>
      <!--  密码  -->
      <el-form-item label="密码" prop="pass" class="form-input">
        <el-input
            v-model="userInfo.pass"
            type="password"
            autocomplete="off"
            placeholder="密码"
            size="medium"
        ></el-input>
      </el-form-item>
      <!--  验证码  -->
      <el-form-item label="验证码" prop="code" class="form-input verify-code">
        <el-input
            v-model="userInfo.code"
            type="text"
            autocomplete="off"
            placeholder="验证码"
            size="medium"
        ></el-input>
        <el-button class="send-btn" type="primary" @click.prevent="cal"
                   size="medium">
          {{num1}} + {{num2}} = 
        </el-button>
      </el-form-item>
      <!--  提交按钮  -->
      <el-form-item class="form-input">
        <el-button class="submit-btn" type="primary" @click="login"
                   size="medium">
          登录
        </el-button>
      </el-form-item>
      <a href="/register" class="to-register">未有账号？去注册</a>
    </el-form>
  </div>

</template>

<script lang="ts">
import {ElMessage} from 'element-plus'
import {reactive, watch, ref} from 'vue'
// import {POST_QS} from "@/api/index.ts";
import {useStore} from 'vuex'
import {useRoute, useRouter} from "vue-router";
import { POST } from '@/api';
import $, { param } from "jquery"
import localstorage from '@/tools/localstorage';

export default {
  name: "Login",
  setup(props: object, ctx: any) {

    let num1 = ref(1);
    let num2 = ref(1);

    const cal = () => {
      Math.random()
      
      num1.value = parseInt((Math.random() * 100).toString().substring(5,7))
      num2.value = parseInt((Math.random() * 100).toString().substring(5,7))
    }
    cal()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const userInfo = reactive({
      name: '',
      pass: '',
      ip: Math.random().toString().substring(3,10),
      code: ''
    })
    const isLogin = reactive({
      nameNotNull: false,
      passNotNull: false,
      codeNotNull: false
    })
    const validateName = (rule: object, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        isLogin.nameNotNull = true
        callback()
      }
    }
    const validatePass = (rule: object, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        isLogin.passNotNull = true
        callback()
      }
    }

    // 设置提交按钮是否可用于提交数据
    watch(userInfo, (v1, v2) => {
      isLogin.nameNotNull = !(userInfo.name === "" || userInfo.name == null)
      isLogin.passNotNull = !(userInfo.pass === "" || userInfo.pass == null)
      if (isLogin.nameNotNull && isLogin.passNotNull) {
        $(".verify-code").show().css("display", "flex")
      }
    })

    const login = () => {
      if (userInfo.code != num1.value + num2.value + '') {
        ElMessage.error("验证码有误，请重试")
        return
      }
      // userInfo.ip = returnCitySN["cip"];
      if (isLogin.nameNotNull && isLogin.passNotNull) {
        POST("/User/UserLogin", {
          "username" : userInfo.name,
          "password" : userInfo.pass,
          "ip" : userInfo.ip
        }).then(res => {
          const data = res.data
          console.log(data, ":data")
          if (data.status == 200) {
            store.dispatch("storeInfo", data.data)
            localstorage.setItem("Aut", data.data.Password)
            console.log(data.data.Password)
            console.log(localstorage.getItemObject("Aut"))
            ElMessage.success("登录成功！")
            // 进行页面的跳转
            setTimeout(() => {
              router.push("/")
            }, 2000)
          } else {
            ElMessage.warning(data.data)
          }
        }).catch(err => {
          ElMessage.error(err.response)
        })
      } else {
        ElMessage.error("用户名和密码不能为空")
      }
    }

    const rules = {
      name: [{validator: validateName, trigger: 'blur'}],
      pass: [{validator: validatePass, trigger: 'blur'}]
    }
    return {
      login,
      userInfo,
      rules,
      isLogin,
      num1,
      num2,
      cal
    }
  }
  }
</script>

<style lang="scss" scoped>

  .verify-code {
    width: 60%;
    display: none;
  }

  .send-btn {
    position: absolute;
    margin-left: 30px;
    margin-top: 2px;
  }
  
#login {
  position: fixed;
  background-image: url("../static/login-bgc.jpg");
  background-clip: padding-box;
  width: 100%;
  height: 100%;
  background-size: cover;
  text-align: center;

  .login-form {
    width: 450px;
    box-shadow: 1px 1px 10px 10px #eee;
    padding: 20px 30px 20px 10px;
    border-radius: 20px;
    margin: 120px auto 0;

    .form-input {
      margin-top: 30px;
    }

    .submit-btn {
      width: 100%;
    }

    .to-register {
      display: block;
      text-align: right;
      font-size: 13px;
    }
  }
}
</style>